import type { Meta, StoryFn } from "@storybook/react-vite"
import { LOCALES } from "../../providers/i18n-provider"
import { For } from "../for"
import { Grid } from "../grid"
import { VStack } from "../stack"
import { Text } from "../text"
import { Format } from "./"

type Story = StoryFn<typeof Format.Byte>

const meta: Meta<typeof Format.Byte> = {
  component: Format.Byte,
  title: "Components / Format / Byte",
}

export default meta

export const Basic: Story = () => {
  return (
    <VStack gap="0">
      <Format.Byte value={50} />
      <Format.Byte value={5000} />
      <Format.Byte value={5000000} />
      <Format.Byte value={5000000000} />
    </VStack>
  )
}

export const Bits: Story = () => {
  return <Format.Byte unit="bit" value={1450} />
}

export const Locale: Story = () => {
  return (
    <Grid gapX="sm" templateColumns="auto 1fr">
      <For each={LOCALES}>
        {(locale) => (
          <>
            <Text color="fg.muted">{locale}</Text>
            <Format.Byte key={locale} locale={locale} value={1450} />
          </>
        )}
      </For>
    </Grid>
  )
}

export const UnitDisplay: Story = () => {
  return (
    <VStack gap="0">
      <Format.Byte unitDisplay="short" value={50300} />
      <Format.Byte unitDisplay="long" value={50300} />
      <Format.Byte unitDisplay="narrow" value={50300} />
    </VStack>
  )
}
